<template>
  <div class="login">
    <svg class="logo" aria-hidden="true">
      <use xlink:href="#jq-login"></use>
    </svg>
    <div class="login-body">
      <var-space direction="column" :size="[60, 0]">
        <var-form
          ref="form"
          :disabled="disabled"
          :readonly="readonly"
          scroll-to-error="start"
        >
          <var-space direction="column" :size="[14, 0]">
            <var-input
              placeholder="请输入用户名"
              :rules="[v => !!v || '用户名不能为空']"
              v-model="state.username"
            />
            <var-input
              placeholder="请输入密码"
              :rules="[v => !!v || '密码不能为空']"
              v-model="state.password"
            />
            <var-space direction="row" :wrap="false" justify="space-between">
              <var-input
                placeholder="请输入验证码"
                :rules="[v => !!v || '验证码不能为空']"
                v-model="state.captcha"
              />
              <img
                v-if="picPath"
                style="width: 150px; height: 48px"
                :src="picPath"
                alt="请输入验证码"
                @click="getCaptchaCode()"
              />
            </var-space>
          </var-space>
        </var-form>
        <var-button
          size="large"
          block
          :loading="loading"
          loading-type="wave"
          type="primary"
          @click="onSubmit"
        >
          登录
        </var-button>
      </var-space>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { showToast, showSuccessToast } from 'vant'
import { getCaptcha, getUserCheckPwd } from '@/api/api'
import router from '@/router/index'
import { useUserStore } from '@/pinia/modules/user'
import { dictStore } from '@/pinia/modules/dict.js'
import { Sm4encrypt } from '@/utils/encryption.js'

const captchaKey = ref(null)
const loading = ref(false)
const disabled = ref(false)
const readonly = ref(false)
const state = reactive({
  username: 'xiong',
  password: 'auJ8535#',
  imgCode: '',
  captcha: ''
})
const form = ref()
const picPath = ref('')

const getCaptchaCode = async () => {
  let res = await getCaptcha()
  if (res.succeed) {
    ;(picPath.value = res.data.captchaImageBase64),
      (captchaKey.value = res.data.captchaKey)
  }
}

// 提交登录或注册表单
const onSubmit = async values => {
  let isPass = await form.value.validate()
  if(!isPass) return
  loading.value = true
  let params = {
    username: state.username,
    password: Sm4encrypt(state.password),
    captchaKey: captchaKey.value,
    captcha: state.captcha
  }
  let res = await useUserStore().LoginIn(params)
  console.log(res)
  if (res.succeed) {
    router.push('/home')
  }
  loading.value = false
}

// 获取验证码
getCaptchaCode()

onBeforeMount(async () => {})
</script>
<style lang="scss" scoped>
.login {
  background-color: #fff;
  height: 100%;
  .logo {
    width: 160px;
    height: 120px;
    display: block;
    margin: 0 auto;
    padding-top: 100px;
  }
  .login-body {
    // margin: 0 40px;
    width: calc(100% - 80px);
    margin: 100px auto 0 auto;
  }
}
</style>
